<template lang="html">
    <div class="xtx-city" ref="target">
        <div class="select" @click="toggleDialog" :class="{ active:visible }">
            <span v-if="!fullLocation" class="placeholder">{{ placeholder }}</span>
            <span class="value"></span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="option" v-if="visible">
            <div class="loading" v-if="loading"></div>
            <template v-else>
                <span class="ellipsis" @click="changeItem(item)" v-for="item in currList" :key="item.code">{{ item.name }}</span>
            </template>
        </div>
    </div>
</template>
<script>
import { ref, computed, reactive } from 'vue';
import { onClickOutside } from '@vueuse/core';
import axios from 'axios';
export default {
    name:'XtxCity',
    props:{
      placeholder:{
        type:String,
        default:'请选择配送地址'
      },
      fullLocation:{
        type:String,
        default: ''
      }
    },
    setup({emit}) {
        // 控制展开和收起
        const visible = ref(false)
        const openDialog = () => {
            // 打开弹窗
            visible.value = true
        }

        const closeDialog = () => {
            // 关闭弹窗
            visible.value = false
        }

        // 切换展开收起
        const toggleDialog = () => {
            if(visible.value) closeDialog()
            else openDialog()
        }

        // 
        const target = ref(null)
        // 监听target元素外的点击事件，若在target外点击，则关闭弹窗
        onClickOutside(target, () => {
            closeDialog()
        })
        // 加载中
        const loading = ref(false)
        const cityData = ref([])
        // 获取城市数据
        const open = async () => {
            visible.value = true
            loading.value = true
            const { data } = await getCityData()
            cityData.value = data
            loading.value = false
            // 清空选择结果
            for(const key in changeResult) {
                changeResult[key] = ''
            }
        }


        const currList = computed(()=>{
            let currList = cityData.value
            if(changeResult.provinceCode) {
                currList = currList.find(p=>p.code === changeResult.provinceCode).areaList
            }

            if(changeResult.cityCode) {
                currList = currList.find(p=>p.code === changeResult.cityCode).areaList
            }
            return currList
        })

        const changeResult = reactive({
            provinceCode:'',
            provinceName:'',
            cityCode:'',
            cityName:'',
            countyCode:'',
            countyName:'',
            fullLocation:''
        })

        const changeItem = (item) => {
            // 省
            if(item.level === 0) {
                changeResult.provinceCode = item.code
                changeResult.provinceName = item.name
            }
            // 市
            if(item.level === 1) {
                changeResult.cityCode = item.code
                changeResult.cityName = item.name
            }
            // 区
            if(item.level === 2) {
                changeResult.countyCode = item.code
                changeResult.countyName = item.name
                changeResult.fullLocation = `${changeResult.provinceName} ${changeResult.cityName} ${changeResult.countyName}`
                closeDialog()
                emit('change', changeResult)
            }
        }

        return {
            visible,
            toggleDialog,
            target,
            loading,
            currList,
            open,
            changeItem
        }
    }
}

// 获取省份数据
const getCityData = () => {
    // eslint-disable-next-line
    return new Promise((resolve, reject) => {
        // 有缓存直接返回,否则重新发送请求获取数据
        if (window.cityData) resolve(window.cityData)
        else {
            const url = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
            axios.get(url).then(res => {
                window.cityData = res.data
                resolve(res.data)
            })
        }
    })
}
</script>
<style lang="less" scoped>
.xtx-city {
    display: inline-block;
    position: relative;
    z-index: 400;
    .select {
        border: 1px solid #e4e4e4;
        height: 30px;
        padding: 0 5px;
        line-height: 28px;
        cursor: pointer;
        &.visible {
            background: #fff;
        }
        .placeholder {
            color:#999;
        }
        .value {
            color:#666;
            font-size: 12px;
        }
        i {
            font-size: 12px;
            margin-left: 5px;
        }
    }
    .option {
        width: 542px;
        border: 1px solid #e4e4e4;
        position: absolute;
        left: 0;
        top: 29px;
        background: #fff;
        min-height: 30px;
        line-height: 30px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        >span {
            width: 130px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            padding: 0 3px;
            &:hover {
                background-color: #f5f5f5;
            }
        }
        .loading {
            height: 290px;
            width: 100%;
            background: url(../../assets/images/loading.gif) no-repeat center;
        }
    }
}
</style>